<template>
  <div>
    <div>
      <span class="text-sm mr-2">主题</span>
      <a-input-search :style="{width:'90%'}" placeholder="Please enter something"/>
    </div>
    <div class="mt-2 mb-2">
      <a-space>
        <span class="text-sm">接收信息机构</span>
        <a-select :style="{width:'160px'}" placeholder="Please select ..." allow-clear>
          <a-option>Beijing</a-option>
          <a-option>Shanghai</a-option>
          <a-option>Guangzhou</a-option>
          <a-option disabled>Disabled</a-option>
        </a-select>
        <span class="text-sm">生效日期</span>
        <a-range-picker
          showTime
          :defaultValue="['2019-08-08 00:00:00', '2019-08-18 00:00:00']"
          @select="onSelect"
          @change="onChange"
          :style="{ ...style, width: '360px' }"
        />
      </a-space>
    </div>
    <!-- 顶部按钮 -->
    <div class="mb-2 flex justify-end">
      <a-space>
        <a-button type="primary" @click="visible = true">
          <template #default>查询</template>
        </a-button>
        <a-button type="primary" @click="visible = true">
          <template #default>重置</template>
        </a-button>
      </a-space>
    </div>
    <!-- 弹窗 -->
    <a-modal v-model:visible="visible" @ok="handleSubmit" @cancel="visible = false" ok-text="提交">
      <template #title>新增</template>
      <div>
        <a-form ref="formRef" :model="form" :style="{width:'auto'}" @submit="handleSubmit">
          <a-form-item field="name" label="姓名" validate-trigger="input" :rules="[{required:true, message:'这是必填的'}]">
            <a-input v-model="form.name" placeholder="尊姓大名..." />
          </a-form-item>
          <a-form-item field="address" label="地址" validate-trigger="input" :rules="[{required:true, message:'这是必填的'}]">
            <a-input v-model="form.address" placeholder="来者何处..." />
          </a-form-item>
          <a-form-item field="email" label="电子邮箱" validate-trigger="input" :rules="[{required:true, message:'这是必填的'}]">
            <a-input v-model="form.email" placeholder="师承何处..." />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <!-- 表格组价 -->
    <HomeTable/>
  </div>
</template>
<script lang='ts' setup>
import HomeTable from './components/Table.vue'
import { ref, reactive } from 'vue';

interface formType {
  name: string,
  address: string,
  email: string,
}

const formRef = ref();
const visible = ref(false)

const form: formType = reactive({
  name: '',
  address: '',
  email: ''
})

// 弹框新增
const handleSubmit = async () => {
  const res = await formRef.value?.validate();
  if (res) {
  }
}
</script>
